import { Fragment, useState } from "react"
import "./index.scss"
import Count from "../../component/Count"
import store from "../../redux/store"
import Person from "../../component/Person"
import { Carousel, Modal, Button, message } from "antd"
import {PlusOutlined, MinusOutlined} from "@ant-design/icons"
import banner1 from "../../common/image/banner1.png"
import banner2 from "../../common/image/banner2.png"
import GoodsItem from "../../component/GoodsItem"
import { goods } from "../../utils/goods_config"
import { connect } from "react-redux"
import {createGoodsDecrement, createGoodsIncrement} from "../../redux/action/cart"

function Home(props) {

    const [buyModal, updateBuyModal] = useState(false)

    const [buyGoods, updateBuyGoods] = useState(null)

    const [buyPrices, updateBuyPrices] = useState(0)

    const [buyCount, updateBuyCount] = useState(1)

    const [isUnclick,updateIsUnclick] = useState(false)

    const getGoodsInfo = (item) => {
        reset()
        updateBuyGoods(item)
        updateBuyPrices(item.prices)
        updateBuyModal(true)
    }

    const handleGoodsPrices = (flag) => {
        if(flag){
            updateBuyCount(buyCount+1)
            updateBuyPrices(buyPrices + buyGoods.prices)
        }else{
            if(buyCount - 1 < 0){
                return false
            }
            updateBuyCount(buyCount-1)
            updateBuyPrices(buyPrices - buyGoods.prices)
        }
    }

    const reset = () => {
        updateBuyGoods(null)
        updateBuyPrices(0)
        updateBuyCount(1)
        updateBuyModal(false)
    }

    const addCart = () => {
        props.add({goods:buyGoods,count:buyCount})
        message.success("加入购物车成功")
        updateBuyModal(false)
    }

    return (
        <Fragment>
            <div className="home">
                <Carousel autoplay>
                    <div >
                        <img className="bannerImg" src={banner1} alt="" />
                    </div>
                    <div>
                        <img className="bannerImg" src={banner2} alt="" />
                    </div>
                </Carousel>
                <div className="goodList">
                    {goods.map(item => {
                        return <GoodsItem key={item.id} goods={item} onClick={() => { getGoodsInfo(item) }} />
                    })}

                </div>
                {/* 购买弹出框 */}
                <Modal 
                className="buyGoodsModal" 
                title="购买向导" 
                visible={buyModal} 
                cancelText="取消"
                okText="加入购物车"
                onOk={addCart}
                onCancel={reset}
 
                >
                    {
                        buyGoods ?
                            <Fragment>
                                <h3 className="goodsName">
                                    {buyGoods.goods_name}
                                </h3>
                                <div className="operation">
                                    <Button  icon={<PlusOutlined/>} onClick={() => handleGoodsPrices(true)}></Button>
                                    <span className="count">{buyCount}</span>
                                    <Button disabled={isUnclick} icon={<MinusOutlined/>} onClick={() => handleGoodsPrices(false)}></Button>
                                </div>
                                <div className="prices">
                                    ￥<span>{buyPrices}</span>
                                </div>
                            </Fragment>

                            : null
                    }
                </Modal>
                {/* <Count store={store} />
                <hr />
                <Person /> */}
            </div>
        </Fragment>
    )
}

export default connect(
    state => ({}),
    // 映射操作方法
    {
        add:createGoodsIncrement,
    }
)(Home)